<template>
	<view>
		<view class="top-menu">
			<u-tabs :list="tabsData" :current="current" @click="clickTabs" lineColor="#00D26E" :activeStyle="{
			            color: '#00D26E',
						fontSize: '24rpx',
			            fontWeight: 'bold',
			            transform: 'scale(1.05)'
			        }" :inactiveStyle="{
			            color: '#333333',
						fontSize: '24rpx',
			            transform: 'scale(1)'
			        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
			</u-tabs>
		</view>
		<view class="lb-main-32" v-if="current==0">
			<u-empty v-if="listData.length < 1" mode="coupon" icon="/static/empty/coupon.png"> </u-empty>
			<view class="lb-box" v-for="(item,index) in listData" :key="index">
				<image src="/static/bg-imgs/coupon-bg.png" mode=""></image>
				<view class="box-item">
					<view class="box-left">
						<view class="price">
							<text>¥</text>
							{{item.coupon.discount_amount*1}}
							<text>元</text>
						</view>
						<view class="tip" v-if="item.coupon.type == 2">
							{{item.coupon.max_condition > 0 ? `满${item.coupon.max_condition}可用`:''}}
						</view>
					</view>
					<view class="box-centre">
						<view class="title">
							{{item.coupon.title}}
						</view>
						<view class="tip">
							{{item.coupon.expire_time ? item.coupon.expire_time + '前有效':''}}
						</view>
					</view>
					<view class="box-right" @click="xzYhq(item)">
						去使用
					</view>
				</view>
			</view>
		</view>

		<view class="lb-main-32" v-if="current==1">
			<u-empty v-if="cardData.length < 1" mode="coupon" icon="/static/empty/coupon.png"> </u-empty>
			<view class="lb-box2" v-for="(item,index) in cardData" :key="index">
				<image :src="getImgUrl(item.cover_image)" mode=""></image>
				<view class="box-centre">
					<view class="title">
						{{item.goods_name}}
					</view>
					<view class="tip">
						库存：{{item.amount}}
					</view>
					<view class="tip">
						{{item.use_time ? item.use_time + '前有效':''}}
					</view>
				</view>
				<view class="box-right" @click="cardYhq(item)">
					去使用
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getMyCouponApiList,
		channelCard,
		addCarApi,
		travelAddOrder,
		beautifyAddOrder,
		xmyAddOrder
	} from "@/api/apis/wash.js"
	import {
		setImgUrl,
		fmtFormat
	} from "@/utils/comm.js"
	export default {
		data() {
			return {
				page: 1,
				limit: 10,
				listData: [],
				isLoading: false,
				money: 0,
				pageType: 0,
				tabsData: [{
					name: '优惠券',
				}, {
					name: '渠道专享'
				}],
				current: 0,
				cardData: []
			}
		},
		onReachBottom() {
			//注意 这里是重要的一步，不满足条件下拉加载不能继续请求数据
			if (!this.isLoading && this.current == 0) {
				this.getList();
			}

		},
		methods: {
			getImgUrl(url) {
				return setImgUrl(url);
			},
			//切换tabs
			clickTabs(item) {
				this.current = item.index;

				if (this.current == 0) {
					this.page = 1;
					this.listData = []
					this.getList();
				} else {
					this.getCard()
				}

			},
			cardYhq(item) {
				// type_id1洗护2家居3回收4丽人美容5礼盒

				if (item.type_id == 1) {
					uni.showLoading({
						title: "提交中",
						mask: true
					});
					addCarApi({
						goods_id: item.goods_id,
						type: 1,
						is_channel: 1
					}).then(res => {
						uni.hideLoading();
						if (res.code == 1) {
							uni.navigateTo({
								url: '/pages/xi-hu/clothes-basket/clothes-basket'
							})
						}

					})
				} else if (item.type_id == 2) {
					uni.showLoading({
						title: "提交中",
						mask: true
					});
					travelAddOrder({
						goods_id: item.goods_id,
					}).then(res => {
						uni.hideLoading();
						if (res.code == 1) {
							uni.navigateTo({
								url: '/pages/jia-kao/order-payment/order-payment?id=' + res.data
									.order_id
							})
						}

					})
				} else if (item.type_id == 3) {

				} else if (item.type_id == 4) {
					uni.showLoading({
						title: "提交中",
						mask: true
					});
					beautifyAddOrder({
						goods_id: item.goods_id,
					}).then(res => {
						uni.hideLoading();
						if (res.code == 1) {
							uni.navigateTo({
								url: '/pages/mei-rong/order-payment/order-payment?id=' + res.data
									.order_id
							})
						}

					})
				} else if (item.type_id == 5) {
					uni.showLoading({
						title: "提交中",
						mask: true
					});
					xmyAddOrder({
						goods_id: item.goods_id,
					}).then(res => {
						uni.hideLoading();
						if (res.code == 1) {
							uni.navigateTo({
								url: '/pages/xmy/order-payment/order-payment?id=' + res.data
									.order_id
							})
						}

					})
				}
			},
			//选择
			xzYhq(item) {
				if (this.money > 0) {
					if (item.coupon.max_condition && this.money < item.coupon.max_condition) {
						this.$u.toast('满' + item.coupon.max_condition + '才可用');
					} else {
						uni.$emit('couponObj', item);
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1000)
					}

				} else {
					uni.navigateTo({
						url: '/pages/xi-hu/goods-list/goods-list'
					})
				}
			},
			//跳转
			goTo(url) {
				if (url) {
					uni.navigateTo({
						url: url
					})
				}
			},
			getCard() {
				channelCard().then(res => {
					this.cardData = res.data
				})
			},
			//列表
			async getList() {
				uni.showLoading({
					title: "加载中",
					mask: true
				});
				this.isLoading = true;
				let res = await getMyCouponApiList({
					// is_recommend: 1,
					page: this.page,
					limit: this.limit,
					type: this.pageType
				})
				uni.hideLoading();
				if (this.page == 1) {
					this.listData = res.data.data;
				} else {
					this.listData = this.listData.concat(res.data.data);
				}
				if (res.data.total > this.page * this.limit) {
					// console.log(res.data.length)
					//请求成功 节流阀 设置为false（没有走完函数不允许再次请求）
					this.isLoading = false;
					this.page++;
				}
			},
		},
		onLoad(options) {
			this.pageType = options.type ? options.type : 0
			this.money = options.money && options.money != undefined ? options.money : 0;
			this.getList();
			this.getCard();
		}
	}
</script>

<style lang="scss">
	.top-menu {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.lb-box {
		position: relative;
		width: 100%;
		height: 162rpx;
		display: flex;
		// justify-content: space-between;
		align-items: center;
		margin-bottom: 24rpx;

		image {
			position: absolute;
			top: 0;
			left: 0;
		}

		.box-item {
			width: 100%;
			position: relative;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.box-left {
				.price {
					font-size: $main-font-36;
					color: #F65D40;

					text {
						// content: '¥ ';
						font-size: $main-font-24;
						color: #F65D40;
					}

					// &::before {
					// 	content: '¥ ';
					// 	font-size: $main-font-24;
					// 	color: #F65D40;
					// }
				}

				.tip {
					font-size: $main-font-20;
					color: #9B9B9B;
					padding-top: 8rpx;
				}
			}

			.box-centre {
				.title {
					font-size: $main-font-28;
					font-weight: bold;
					color: #F65D40;
				}

				.tip {
					font-size: $main-font-20;
					color: #9B9B9B;
					padding-top: 8rpx;
				}
			}


		}
	}

	.box-right {
		width: 120rpx;
		height: 48rpx;
		background: linear-gradient(126deg, #F7583F 0%, #F28F4C 100%);
		border-radius: 24rpx;
		line-height: 46rpx;
		text-align: center;
		font-size: $main-font-24;
		color: $main-font-color-white;
	}

	.lb-box2 {
		display: flex;
		align-items: center;
		background-color: #fff;
		margin-bottom: 20rpx;
		padding: 10rpx;
		border-radius: 10rpx;

		.title {
			font-size: $main-font-28;
			font-weight: bold;
			color: #F65D40;
		}

		.tip {
			font-size: $main-font-20;
			color: #9B9B9B;
			padding-top: 8rpx;
		}

		image {
			width: 120rpx;
			height: 120rpx;
			margin-right: 20rpx;
		}

		.box-centre {
			flex: 1;
		}
	}
</style>